<template>
    <div>
        <div class="header">
            <router-link class="header-btnLeft" :to="'/show/'+goods_id" ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">产品旅行红包</h1>
            <div class="header-btnRight"></div>
        </div>
        <!--优惠券-->
        <div class="ticket">
            <div class="ticket-main">
                <!--<div class="ticket-main-title">产品优惠券</div>-->
                <div class="ticket-main-list">

                    <div class="ticket-main-list-item" v-for="(item,index) in ticketArr">
                        <div class="ticket-main-list-item-left">
                            <div class="ticket-main-list-item-left-price" v-if="item.discount">
                                {{item.discount*10}}
                                <span class="ticket-main-list-item-left-price-sign">折</span>
                            </div>
                            <div class="ticket-main-list-item-left-price" v-if="item.full_reduction">
                                <span class="ticket-main-list-item-left-price-sign">¥</span>
                                {{item.full_reduction}}
                            </div>
                            <div>满 {{item.coupon_usecondition}} 元可用</div>
                            <div>有效期：{{item.validityperiod}}</div>
                        </div>
                        <div class="ticket-main-list-item-right">
                            <div class="ticket-main-list-item-right-end" v-if="item.receive">
                                已领取
                            </div>
                            <div class="ticket-main-list-item-right-start" v-else  @click="getTicket(index,item.coupon_id)">
                                领取
                            </div>
                        </div>
                        <img class="ticket-main-list-item-bg" src="../assets/buy-ticket-item-bg.png"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from "mint-ui"
    import wxShare from "../store/wxShare"
    export default {
        name: "Show-ticket",
        data(){
            return{
                ticketArr:[],
                goods_id:0,
            }
        },
        methods:{
            // 领取优惠券
            getTicket(index,coupon_id){
                if(!this.$store.state.token){
                    this.$router.push({path:"/my-login"})
                    return;
                }
                this.axios.post('wapcouponreceive', {coupon_id:coupon_id})
                    .then(res => {
                        Toast(res.msg);
                        this.ticketArr[index].receive=2;
                    })
                    .catch(err => console.log(err));
            },
            getData() {
                let _that = this;
                let params = {
                    goods_id: _that.goods_id
                }

                _that.axios.get('wapcouponindex', params)
                    .then(res => {
                       _that.ticketArr=res.data;
                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '产品旅行红包', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted() {
            this.goods_id = this.$route.params.id;
            this.getData();
            window.addEventListener('scroll', this.handleScroll);
            this.share();
        },
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    //优惠券
    .ticket {
        &-main {
            position: relative;
            padding: rpx(30);
            background: $color0;
            &-title {
                padding-bottom: rpx(30);
                font-size: rpx(40);
                text-align: center;
            }
            &-close {
                position: absolute;
                left: 50%;
                bottom: rpx(-100);
                margin-left: rpx(-32);
                width: rpx(64);
                height: rpx(64);
            }
            &-list {
                width: rpx(690);
                margin: auto;
                &-item {
                    position: relative;
                    width: 100%;
                    height: rpx(160);
                    margin-bottom: rpx(30);
                    &-bg {
                        position: absolute;
                        width: rpx(690);
                        height: rpx(160);
                        z-index: 1;
                        left: 0;
                        top: 0;
                    }
                    &-left {
                        position: absolute;
                        width: rpx(370);
                        height: rpx(160);
                        z-index: 2;
                        left: rpx(30);
                        top: 0;
                        font-size: rpx(20);
                        color: $color0;
                        &-price {
                            padding-top: rpx(20);
                            font-size: rpx(60);
                            &-sign {
                                font-size: rpx(36);
                            }
                        }
                    }
                    &-right {
                        position: absolute;
                        width: rpx(240);
                        height: rpx(160);
                        z-index: 2;
                        right: 0;
                        top: 0;
                        &-start {
                            margin-top: rpx(50);
                            margin-left: rpx(26);
                            display: block;
                            padding: rpx(15);
                            width: rpx(170);
                            text-align: center;
                            border-radius: $radius30;
                            background: $color0;
                            color: $color7;
                            font-size: rpx(32);
                        }
                        &-end {
                            margin-top: rpx(20);
                            margin-left: rpx(50);
                            width: rpx(120);
                            line-height: rpx(120);
                            height: rpx(120);
                            background: $color2;
                            border-radius: 50%;
                            text-align: center;
                            color: $color0;
                            font-size: rpx(32);
                        }
                    }
                }
            }
        }

    }
</style>